import clsx from "clsx";

import { IfElse } from "../IfElse/IfElse";
import { countingProgressbar } from "@/helpers";
import { VerticalProgressbar } from "../VerticalProgressbar";
import { AdvancedButton } from "../AdvancedButton/AdvancedButton";

interface Props {
  subtasks: Task[],
  handleToggle(): void
  toggleShow: boolean
}

export const SubTask = ({ subtasks, handleToggle, toggleShow }: Props) => {

  const successSubtask = subtasks.filter(it => !!it.is_closed)

  return (
    <IfElse>
      <IfElse.When isTrue={!!subtasks} >
        <div className="w-full cursor-default " onClick={(e) => e.stopPropagation()}>
          <div className="flex flex-col ">
            <AdvancedButton className="text-[13px] text-[--btn-color-hover]  -mb-2 " >{successSubtask.length}/{subtasks.length}</AdvancedButton>
            <div className="flex items-center gap-2 " >
              <VerticalProgressbar percent={countingProgressbar(subtasks || [])} />
              <AdvancedButton
                icon='ChevronDown'
                variant={'base'}
                onClick={handleToggle}
                className={clsx('transition-all', toggleShow ? 'rotate-180' : '')}
              />
            </div>
          </div>
        </div>
      </IfElse.When>
    </IfElse>

  )
}